<template>
  <div>
    <p>{{ num }}</p>
    <p>{{ num }}</p>
    <p>{{ num }}</p>
    <p>{{ getNum }}</p>
    <p>{{ getNum }}</p>
    <p>{{ getNum }}</p>
  </div>
</template>

<script>
// 目标:计算属性语法
// 作用：一个变量值，依赖其他变量计算而得来的结果
// 效果：依赖项值发生变化，会重新计算属性的值
// 语法：
// computed：{
//   ’计算属性名‘(){
//     return '值'
//   }
// }
// 注意：计算属性和data一样，都是定义的变量名（不能重名）

// 函数调用和计算属性区别哦
// 计算属性的有事：它自带缓存功能（多次使用计算属性是，计算属性函数只执行一次，把结果缓存在内存中，以后直接从缓存取值
export default {
  data () {
    return {
      a: 10,
      b: 30
    }
  },
  computed: {
    num () {
      console.log('计算属性')
      return this.a + this.b
    }
  },
  methods: {
    getNum () {
      console.log('函数调用')
      return this.a + this.b
    }
  }
}
</script>